<template>
	<view class="record">
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
		    <scroll-view style="height: 100%;" scroll-y="true">
				<condition :data="otherParams" @sendCondition="getCondition"></condition>
		    </scroll-view>
		</uni-drawer>
		<uni-nav-bar
			left-icon="arrowleft" 
			:fixed="true"
			:statusBar="true"
			title="历史记录" 
			color="#fff" 
			background-color="#f29004" 
			@clickLeft="back" >
			<block slot="right">
				<view class="nav-bar-btn" @tap="showDrawer">
					<image class="icon" mode="aspectFit" src="@/static/icon/iv_shaixuan2.png"></image>
				</view>
			</block>
		</uni-nav-bar>
		
		<view class="list">
			<view class="list-group">
				<view 
					class="list-item uni-padding-wrap" 
					v-for="(event, index) in events" 
					:key="index">
					<view class="panel" @tap="openPage(event)">
						<view class="panel-group">
							<view class="panel-item">
								<text class="panel-item-header">任务号：</text>
								<text class="panel-item-body">{{ event.event_task_no }}</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">问题描述：</text>
								<text class="panel-item-body">{{ event.event_describe }}</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">上报时间：</text>
								<text class="panel-item-body">{{ event.event_report_time }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import condition from '@/components/condition/record.vue'
import { queryHistoryEventList } from '@/api/configure.js';
import {getUserInfo} from '@/util/util.js';	
export default{
	components: {
		condition
	},
	data(){
		return {
			events: [],
			pageNum: 1,
			pageSize: 10,
			total: 100,
			status: 'more',
			otherParams: {
				endTime: '',
				eventDescribe: '',
				startTime: '',
				endTime: ''
			}
		}
	},
	methods: {
		getCondition(res) {
			Object.keys(res).forEach((key) => {
				this.otherParams[key] = res[key]
			})
			
			this.reset();
			
			this.closeDrawer();
		},
		showDrawer() {
			this.$refs.showRight.open();
		},
		closeDrawer() {
		    this.$refs.showRight.close();
		},
		init() {
			this.getEventList();
			
			uni.$on('flow.record.refresh', this.reset);
		},
		async getEventList(){
			this.status = "loading";
			
			let userInfo = getUserInfo();
			
			if(userInfo){
				let data = {
					createUser: userInfo.userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				
				Object.assign(data, this.otherParams);
				
				await queryHistoryEventList(data).then((res) => {
					let events = res.rows.slice(0);
					
					this.events = [...this.events, ...events];
					this.total = res.total;
					
					if (this.pageNum * this.pageSize >= this.total) {
						this.status = "noMore";
					} else {
						this.status = "more";
					}
				})
			}
		},
		openPage(res) {
			let eventId = res.event_id;
			
			uni.navigateTo({
			    url: `/pages/case/case?eventId=${eventId}`
			});
		},
		reset(){
			this.events = [];
			this.pageNum = 1;
			this.pageSize = 10;
			this.total = 100;
			
			this.getEventList().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		}
	},
	onLoad() {
		this.init();
	},
	onUnload() {
		uni.$off('flow.record.refresh');
	},
	onReady() {
	},
	onShow() {
		
	},
	onReachBottom() {
		if (this.pageNum * this.pageSize >= this.total) {
			this.status = "noMore";
			return;
		} else {
			this.pageNum = this.pageNum + 1;
			this.status= 'loading';
		}
		
		setTimeout(() => {
			this.getEventList();
		}, 300);
	},
	onPullDownRefresh() {
		this.reset();
	}
}
</script>

<style lang="scss">
	.list {
		.list-group{
			.list-item{
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				&:after{
					content: '';
					position: absolute;
					bottom: 0rpx;
					left: 0rpx;
					right: 0rpx;
					height: 1rpx;
					transform: scaleY(.5);
					opacity: 0.382;
					background-color: #dedede;
				}
			}
		}
	}
	
	.panel{
		.panel-group{
			.panel-item{
				margin-bottom: 10rpx;
				font-size: 36rpx;
				color: #5d5d5d;
				
			}
		}
	}
	
	.nav-bar-btn{
		margin-right: -20rpx;
		padding: 10px;
		height: 44px;
		width: 44px;
		box-sizing: border-box;
		.icon{
			width: 100%;
			height: 100%;
			display: block;
		}
	}
</style>
